<template>
    <div>
       <h2>会员显示列表</h2>
       <a href="/addmember">新增会员</a>
       <table class="table">
        <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>创建时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="a in data">
            <td>{{a.id}}</td>
            <td :style="a.starts==1?'color: green':'color: red'">{{a.name}}</td>
            <td>{{formaDate(a.createTime)}}</td>
            <td :style="a.starts==1?'background-color: green':'background-color: red'">{{a.starts==1?"正常":"冻结"}}</td>
            <td>
                <input type="button" v-show="a.isDel==false" value="逻辑删除" @click="IsDel(a.id)">
                <input type="button" value="更新" @click="Upd(a.id)">
            </td>
        </tr>
        </tbody>
       </table>
       
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue';
import { useRouter } from 'vue-router';
import moment from 'moment';
const router=useRouter()


onMounted(()=>{
    Showmember()
})

const formaDate=(date:string)=>{
    return moment(date).format('YYYY年MM月DD日 HH:mm:ss')
}

//动态绑定数据
const data=ref([])
//显示
const Showmember=()=>{
    axios.get("/api/Member/GetAllMembers",{}).then(res=>{
       data.value=res.data
    })
}
//逻辑删除
const IsDel=(did:number)=>{
  if(!confirm('确定修改删除状态么???'))
  {
      return;
  } 
    axios.delete("/api/Member/IsDel",{params:{id:did}}).then(res=>{
       if(res.data>0)
       {
        alert('删除状态修改成功!')
        Showmember()
       }
       else
       {
        alert('删除状态修改失败')
       }
    })
}

//会员更新
const Upd=(uid:number)=>{
  router.push({path:'/updmember',query:{id:uid}})
}

</script>

<style scoped>
td{
    padding: 8px;
}
</style>